<template>
	<view>
		<view class="Distribution-Tandian" v-if="isSingle !== 1">
			<!-- 产品下架提示 -->
			<view class="Distribution-Tandian-hint" v-if="isFooterButton">产品已经下架啦～再瞧瞧别的吧</view>

			<view class="Distribution-Tandian-main">
				<view class="Distribution-Tandian-main-left flex">
					<view class="menu-item" @click.stop="toHome"><image src="/static/detail/icon_xqy_home_new.png"/><text>首页</text></view>
					<view class="menu-item" @click="toService"><image src="/static/detail/icon_xqy_servic_new.png"/><text>客服</text></view>
				</view>
				
				<view class="Distribution-Tandian-main-right flex">
					
					<block v-if="productInfo.tdSeekApplyId !== -1">
						<button
							style="width:100%;"
							@click="openTandianDetail(productInfo.tdSeekApplyId)"
						>
						已申请探店，查看详情
						</button>
					</block>

					<block v-else-if="productInfo.isSoldOut !== 1 || !!isExpire">
						<button
							:loading="isLoading"
							:class="{
								active: isLoading
							}"
							v-if="!productInfo.groupSeekFull && productInfo.groupSeek"
							style="width:100%;margin-right: 16rpx;"
							@click="openTandianApplication(3)"
						>
							拼团探店
						</button>
						<button
							:loading="isLoading"
							:class="{
								active: isLoading
							}"
							v-if="!productInfo.personalSeekFull"
							style="width: 100%;"
							@click="openTandianApplication(2)"
						>
							独立探店
						</button>
					</block>
					
					
					<block v-else>
						<button
							class="disabled"
							style="width:100%;"
						>
							探店名额已满
						</button>
					</block>
				</view>
			</view>
		</view>
		<view v-else class="layout-group-content-item-right">
			<button
				:class="{
					disabled: productInfo.groupSeekFull
				}"
				style="width:100%"
				@click.stop.prevent="openTandianApplication(1)"
			>
				{{ productInfo.groupSeekFull ? '名额已满' : '去拼团'}}
			</button>
		</view>
		<!-- 客服 -->
		<DistributionService v-model="isPopup" />
	</view>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import { checkProduct } from '@/api/tandian';
import { checkDyAuth } from '@/api/third';
import { isMultipleAuthor } from '@/utils/common';
import DistributionService from '@/components/distributionService';

export default {
	name: 'Distribution-Tandian',
	components: {
		DistributionService
	},
	props: {
		isExpire: {
			type: Number,
			default: 0 // 是否在有效期内 0-在;1-不在
		},

		detailInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		productInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		// isTandianFull: {
		// 	type: Boolean,
		// 	default: false
		// },
		// 1 groupItem组件拼团 2 详情页独立探店 3 详情页拼团探店
		isSingle: {
			type: Number,
			default: 2
		},
		applyNeedObj: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},

	computed: {
		...mapGetters(['getToken','getIsShowNotBindCode']),

		isDetailInfo() {
			const { detailInfo } = this;

			return Object.keys(detailInfo).length;
		},

		isFooterButton() {
			const { isExpire } = this;

			return !!isExpire;
		},

		// isDisabled() {
		// 	const { isExpire, isTandianFull } = this;

		// 	return !!isExpire || isTandianFull;
		// }
	},

	data() {
		return {
			isLoading: false,
			isPopup:false // 客服弹窗
		};
	},
	methods: {
		...mapMutations(['changeTandianProductDetail','changeShowNotBindCode','changeShowNotBind']),
		toHome(){
			uni.switchTab({
				url: '/pages/tabBar/Index'
			});
		},

		openTandianDetail(id = ''){
			const url = `/productOrderPage/orderDetails?orderId=${id}`;
			uni.navigateTo({
				url
			});
		},

		toService(){
			this.isPopup = true
		},
		checkUserStatus() {
			// 0-没有绑定抖音账号，1-已绑定抖音号，2-默认抖音账号信息不完善,3-默认抖音账号信息完整
			return new Promise((resolve, reject) => {
				checkDyAuth().then((res = {}) => {
					console.log(res);
					const { data = { checkStatus: 1 }, code } = res;
					if (code === 200) {
						let getStatus = data.checkStatus;
						resolve(getStatus);
					} else {
						reject();
					}
				});
			});
		},
		toDyAccount() {
			const url = `/thirdManage/dyAccount`;
			uni.reLaunch({
				url
			});
		},
		openTandianApplication(singleValue = 2) {
			const { isExpire, detailInfo, productInfo, isSingle,applyNeedObj } = this;
			const status = isMultipleAuthor();

			if (!status || this.isLoading) {
				return;
			}

			this.checkUserStatus()
				.then((res) => {
					if (res === 0) {
						this.changeShowNotBindCode(true)
						return;

					} else if (res === 2) {
						this.changeShowNotBindCode(false)
						this.changeShowNotBind(true)
						return;
					}
					if (isExpire) {
						uni.showToast({
							mask: true,
							icon: 'none',
							title: '活动已结束，再瞧瞧别的吧～'
						});
						return;
					}
					
					this.isLoading = true;

					const { commissionsList, ...otherParams } = detailInfo;

					this.changeTandianProductDetail({
						...productInfo,
						...otherParams,
						applyNeedObj,
						isSingle: singleValue
					});

					const url = '/tandianPage/ApplyTandian';

					uni.navigateTo({
						url,
						success: (e) => {
							this.isLoading = false;
						}
					});

					return;

					checkProduct({
						productId: productInfo.id
					})
						.then((res) => {
							const { code, message } = res;

							if (code !== 200) {
								code === 1001 &&
									uni.showToast({
										mask: true,
										icon: 'none',
										title: message
									});

								return;
							}

							const { commissionsList, ...otherParams } = detailInfo;

							this.changeTandianProductDetail({
								...productInfo,
								...otherParams
							});

							const url = '/tandianPage/ApplyTandian';

							uni.navigateTo({
								url,
								success: (e) => {
									this.isLoading = false;
								}
							});
						})
						.catch((e) => {
							this.isLoading = false;
						});
				})
				.catch(() => {
					uni.showToast({
						icon: 'none',
						title: '状态获取失败'
					});
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.Distribution-Tandian {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0px 0px 8rpx 0px rgba(51, 51, 51, 0.14);

	@include Db_iosBottomDistance(16rpx);

	&-hint {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		font-size: 28rpx;
	}

	&-main {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 16rpx 28rpx 16rpx 20rpx;
		box-sizing: content-box;

		&-left {
			min-width: 216rpx;
			padding: 0 20rpx 0 20rpx;

			view {
				display: inline-block;
			}
			button {
				background: none;
				border: none;
			}
			button::after {
				display: none;
			}
			.menu-item{
				width: 45rpx;
				text-align: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				text{
					font-size: 20rpx;
					color: #333;
					margin-top: 6rpx;
				}
			}
			.menu-item:first-child{
				margin-right: 40rpx;
			}
			.preferential-price {
				color: $moneyColor;
				font-size: 24rpx;
				font-weight: bold;

				text {
					font-size: 40rpx;
					@include Db_moneyStyle(400);
				}
			}

			.original-price {
				color: #999;
				font-size: 20rpx;
				margin-left: 4rpx;
				text-decoration: line-through;
			}
		}

		&-right {
			flex: 1;
			width: 100%;
			button {
				@include Db_newButton(88rpx, 24rpx);
				&.disabled {
					background: #AAAAAA;
				}
			}
		}
	}
}
.layout-group-content-item-right{
	button{
		@include Db_newButton(60rpx,16rpx)
	}
}
</style>
